<template>
	<view>
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>

		<view v-if="isLoaded">
			<view class="title-box">
				<view class="title">
					<view class="title1">
						<text class="title1-left">{{info.title}}</text>
					</view>
					<text class="title2">发布时间：{{info.created_at}}</text>
				</view>
			</view>
			<view class="detail">
				<text class="detail-title">
					详情
				</text>
				<text class="detail-content">{{info.content}}</text>
			</view>

			<view class="detail">
				<text class="detail-title">
					联系人
				</text>
				<text class="detail-content">{{info.contacts}}</text>
			</view>

			<view class="detail">
				<text class="detail-title">
					位置信息
				</text>
				<text class="detail-content">{{info.location}}</text>
			</view>

		</view>

		<view class="bottom">
			<!-- <view class="btn1 btn" style="letter-spacing: 4upx;">{{homeInfo.price}}元/月</view> -->
			<view class="btn2 btn" @tap="callPhone">联系电话</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '智慧培训详情',
				id: 0,
				isLoaded: false,
				info: {}
			}
		},

		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.id = option.id

			uni.showLoading({
				title: '加载中...'
			});
			this.getInfo();
			this.isLoaded = true;
			uni.hideLoading();

		},
		methods: {

			async getInfo() {
				let dataObj = {
					id: this.id
				}
				let url = '/certificate_detail';
				let ldata = await this.$myRequest({
					url: url,
					data: dataObj
				})

				let ndata = ldata.data.data;
				this.info = ndata
			},

			async callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.info.mobile
				});
			},

		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: $font-base;
	}
</style>
<style lang='scss' scoped>
	.title-box {
		font-size: $font-base;
		// #ifdef APP-PLUS
		padding-top: 160rpx;
		// #endif

		// #ifdef H5
		padding-top: 100rpx;
		// #endif

		// #ifdef MP-WEIXIN
		padding-top: 160rpx;
		// #endif

		.title {
			width: 100%;
			padding: 31rpx 44rpx;
			background-color: #fff;
			line-height: 42rpx;
			/* position: relative; */
			border-bottom: 1px solid #f3f3f6;

			.title1 {
				display: flex;
				justify-content: space-between;
				height: 42rpx;
				padding-bottom: 4rpx;

				.title1-left {
					font-size: 30rpx;
					/* font-weight: bold; */
				}

				.title1-right {
					color: #f3431a;
				}
			}

			.title2 {
				height: 42rpx;
				color: #666666;
				font-size: $font-base;
			}
		}

	}

	.detail {
		width: 100%;
		padding: 31rpx 44rpx;
		background-color: #fff;
		line-height: 42rpx;
		position: relative;
		border-bottom: 1px solid #f3f3f6;

		.detail-title {
			display: block;
			font-size: 30rpx;
			/* font-weight: bold; */
			padding-bottom: 4rpx;
		}

		.detail-content {
			color: #666666;
			font-size: $font-base;
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		height: 150rpx;
		background-color: white;
		display: flex;
		width: 100%;
		color: white;

		.btn {
			width: 340rpx;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 80rpx;
			margin: 0 auto;
			margin-top: 35rpx;
		}

		.btn1 {
			// flex: 1;
			background-color: #3c88fd;
		}

		.btn2 {
			background-color: #f3511a;
		}
	}
</style>
